<template>
	<view class="allotSeat">
		<u-toast ref="uToast" />
		<view class="seatslog" :style="'width:'+ (size + gap) * placeX + 'rpx;height:'+ (size + gap) * placeY + 'rpx;'">
			<view class="seat" v-for="(item,index) in seats" :key="index" :style="'margin-Bottom:' + gap + 'rpx;'">
				<image v-if="item.status===1" class="img" @click="handleChooseSeat(item)"
					:style="'width:'+ size + 'rpx;height:'+ size + 'rpx;margin-Left:' + gap + 'rpx;'"
					:src="selectPlace===item.place?`../../static/green.png`:`../../static/white.png`"></image>
				<image v-else class="img"
					:style="'width:'+ size + 'rpx;height:'+ size + 'rpx;margin-Left:' + gap + 'rpx;'"
					src="../../static/red.png"></image>
			</view>
		</view>
		<u-picker mode="time" v-model="startTimeShow" :params="params" @confirm="confirmStart" title="选择开始时间"></u-picker>
		<u-picker mode="time" v-model="estimateTimeShow" :params="params" @confirm="confirmEstimate" title="预计结束时间"></u-picker>
		<u-button @click="pickTime()" :loading="buttonLoading" type="success">
			选择时间
		</u-button>
		<u-button @click="order()" :loading="buttonLoading" type="success">
			确认
		</u-button>
	</view>
</template>

<script>
	import {
		elementsAttr
	} from '../../common/dom.js'
	import white from '../../static/white.png'
	import red from '../../static/red.png'
	import green from '../../static/green.png'
	export default {
		data() {
			return {
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				startTimeShow: false,
				estimateTimeShow: false,
				buttonLoading: false,
				seats: [],
				selectPlace: '',
				placeX: '',
				placeY: '',
				loading: false,
				size: 100,
				gap: 5,
				roomId: '',
				roomName: '',
				seatKey: '',
				place: '',
				estimateTime: '',
				startTime: '',
				userStatus: uni.getStorageSync('userStatus'),
			}
		},
		methods: {
			//根据教室查询座位
			seatTable(id) {
				console.log(id, 77)
				this.roomId = id
				this.loading = true;
				uni.request({
						url: "http://192.168.2.149:3000/seats/findByRoom/" + id,
						method: "GET"
					})
					.then((res) => {
						console.log(res, 456)
						if (res[1].data.status === "ok") {
							this.seats = res[1].data.data
							console.log(this.seats, 1234)
							//过滤数组中status为2的对象，并遍历提取出每一项的place
							this.result = this.seats.filter(item => item.status === 2).map(item => item.place)
							console.log(...this.result, 2222);
							//取数组中最后一项的place，拆分出X、Y
							this.placeX = this.seats.slice(-1)[0].place.split(',')[0]
							this.placeY = this.seats.slice(-1)[0].place.split(',')[1]
							//this.loadSeats();
						} else {
							this.$refs.uToast.show({
								title: '获取信息失败',
								type: 'error',
								position: 'top',
							})
						}
						this.loading = false;
					})
			},
			//选择座位逻辑
			handleChooseSeat(item) {
				console.log(item)
				// if (this.userStatus === 2) {
				// 	this.$refs.uToast.show({
				// 		title: '您已经在占座状态',
				// 		type: 'error',
				// 		position: 'top',
				// 	});
				// 	return
				// }
				//如果点击已选座位，清空当前选择
				if (this.selectPlace === item.place) {
					console.log(111)
					this.selectPlace = ''
					this.seatKey = ''
					this.place = ''
				} else {
					//当前选择座位
					console.log(333)
					this.selectPlace = item.place
					this.seatKey = item.seatKey
					this.place = item.place
				}
			},
			//选择时间框
			pickTime(){
				this.startTimeShow = true	
			},
			//确认开始时间
			confirmStart(e){
				console.log(e.timestamp,555)
				this.startTime = e.timestamp
				this.estimateTimeShow = true
			},
			//确认预估结束时间
			confirmEstimate(e){
				console.log(e.timestamp,666)
				this.estimateTime = e.timeStamp
			},
			//确认提交
			order() {
				if (!this.selectPlace) {
					this.$refs.uToast.show({
						title: '请先选择座位再提交',
						type: 'error',
						position: 'top',
					});
					return
				}
				console.log(1, this.roomName)
				this.buttonLoading = true;
				let addform = {
					seatKey: this.seatKey,
					status: 2,
					roomName: this.roomName,
					place: this.place,
					username: uni.getStorageSync('userInfo').username,
					nickname: uni.getStorageSync('userInfo').nickname,
					creatTime: Number(new Date()),
					estimateTime: this.estimateTime,
					startTime: this.startTime
				}
				console.log(addform, 9999999999)
				return
				uni.request({
						url: "http://192.168.2.149:3000/seats/orderSeat/" + this.roomId,
						method: "POST",
						data: addform,
					})
					.then((res) => {
						console.log(res, 456)
						if (res[1].data.status === "ok") {
							this.$refs.uToast.show({
								title: '选座成功,即将跳转到主页面',
								type: 'sucess',
								position: 'top',
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/Login/Home',
									success: (res) => {
										let page = getCurrentPages().pop();
										if (page == undefined || page == null) return;
										page.onLoad();
									},
								})
							}, 2000);
						} else {
							this.$refs.uToast.show({
								title: '选座失败',
								type: 'error',
								position: 'top',
							});
							this.buttonLoading = false;
						}
					})

			},
		},
		onLoad(option) {
			console.log(option.roomId, 1111);
			console.log(option.roomName, 2222);
			this.roomName = option.roomName
			this.seatTable(option.roomId)
		}
	}
</script>

<style scoped lang="scss">
	.seatslog {
		margin: 0 auto;
		float: left;
		background-color: #007AFF;
	}

	.seat {
		float: left;
	}

	.img {
		float: left;
	}
</style>
